
import * as THREE from 'three'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'

//1.创建场景对象Scene（场景）
var scene=new THREE.Scene();

//2. 创建网格模型（场景-网格）

// （1）创建一个立方体几何体
var geometry=new THREE.BoxGeometry(100,100,100)//长宽高

// （2）材质
var material=new THREE.MeshBasicMaterial({
    color:0x00ff00,
    transparent:true,
    opacity:0.5//透明度
});

//(3)网格模型对象
var mesh=new THREE.Mesh(geometry,material)

//(4)将网格模型对象添加到场景中
scene.add(mesh)
//(5)添加坐标轴
const axesHelper=new THREE.AxesHelper(100);
scene.add(axesHelper)

// 3.相机设置（相机）
const width=window.innerWidth //画布宽
const height=window.innerHeight//画布高

var k =width/height  //画布高宽比

//创建相机对象   透视相机
var camera=new THREE.PerspectiveCamera(50,k,1,1000)
//设置相机的位置
camera.position.set(200,300,200)
//设置相机方向
camera.lookAt(scene.position)

//创建渲染器对象
var renderer=new THREE.WebGLRenderer()
//设置渲染区尺寸
renderer.setSize(width,height)
//渲染执行操作
renderer.render(scene,camera)



//插入浏览器里面

document.body.appendChild(renderer.domElement)

//响应式 控制器

const controls=new OrbitControls(camera,renderer.domElement)

//如果OrbitControls改变相机参数，重新调用渲染器渲染三维场景
controls.addEventListener('change',function(){
    renderer.render(scene,camera)//执行渲染条件
    //浏览器查看控制台相机变化的位置
    console.log('camera.position',camera.position)
})